﻿@{
    Layout = "/Views/Shared/_SubLayout.cshtml";
    ViewBag.Title = "產品類別";
}
<script>
    $(document).ready(function () {
        $.fn.metro.onPrevClick = function () {
            window.location = "/Home";
        };

        showLoading();
        loadProductTypes();
    });

    function addProductType(level) {
        if (level == 0) {
            window.location = "/Home/ProductTypeEdit";
        }
        else {
            var id = $('.treeNode.selected .productTypeID').html();

            if (id == undefined || id == '') {
                showMessage('請選擇需要新增下級的類別');
            }
            else {
                window.location = "/Home/ProductTypeEdit?parentid=" + id;
            }
        }
    };
    function changeProductType() {
        var id = $('.treeNode.selected .productTypeID').html();

        if (id == undefined || id == '') {
            showMessage('請選擇需要修改的類別');
        }
        else {
            window.location = "/Home/ProductTypeEdit?id=" + id;
        }
    };
    function deleteProductType() {
        var id = $('.treeNode.selected .productTypeID').html();

        if (id == undefined || id == '') {
            showMessage('請選擇需要刪除的類別');
        }
        else {
            //window.location = "/Home/ProductTypeEdit?id=" + id;
        }
    };
</script>
<script id="treeNodeTemplate" type="text/x-jquery-tmpl">
    {{if Children.length}}
        <li class="expandable">
            <div class="hitarea expandable-hitarea"></div>
            <div class="treeNode">${Name}<div class="productTypeID">${ID}</div></div>
            <ul style="display: none;">
                {{tmpl(Children) "#treeNodeTemplate"}}
            </ul>
        </li>
    {{else}}
        <li>
            <div class="treeNode">${Name}<div class="productTypeID">${ID}</div></div>
        </li>
    {{/if}}
</script>
<div id="ProductTypeMgt">
    <div class="metro_toolbar">
        <div class="metro_input_contain">
            <a class="metro_input_btn" onclick="addProductType(0);">新增類別</a> <a class="metro_input_btn"
                onclick="addProductType(1);">新增下級類別</a> <a class="metro_input_btn" onclick="changeProductType();">
                    修改類別</a> <a class="metro_input_btn" onclick="deleteProductType();">刪除類別</a>
        </div>
    </div>
    <ul class="treeview" id="tree">
    </ul>
</div>
<script>
    function loadProductTypes() {
        var url = "/Home/GetProductTypes";
        $.ajax({
            url: url,         //请求链接 
            dataType: "json",
            success: function (result) {
                $('#treeNodeTemplate').tmpl(result).appendTo($('#tree'));

                $('#tree').treeview({
                    collapsed: true,
                    animated: 'fast',
                    prerendered: true,
                    persist: 'location'
                });

                $('.treeNode', '#tree').unbind('click').bind('click', function () {
                    $('.treeNode:not(.hover)', '#tree').removeClass('selected');
                    $(this).addClass('selected');
                });
                $('.treeNode:odd', '#tree').addClass('odd');
                $('.treeNode:even', '#tree').addClass('even');

                hideLoading();
            }
        });
    };
</script>
